Extra Delete
Let's remove a song from our playlist
App.js#
App.js
deleteSong(index) { console.log(index);}Don't forget to bind it in the constructor
App.js
this.deleteSong = this.deleteSong.bind(this);Pass this function down to Songlist
App.js
<SongList playlists={this.state.playlists} handleAdd={this.addLovedSong} handleDelete={this.deleteSong}/>Pass this function down to Song, and add a new prop index
App.js
<Song song={song} key={index} index={index} handleAdd={this.props.handleAdd} handleDelete={this.props.handleDelete}/>Add a new td with an x in it and trigger this onClick
App.js
<td onClick={() => this.props.handleDelete(this.props.index)}>X</td>When we click an X it should log an index position from our delete function in App.js
Now let's add our delete functionality. Remember this is just some dummy data - so we can just use the index position. But this isn't the 'safe' way to do it in production. You'd want to use an id number.
App.js
deleteSong(index) { this.setState({ playlists: { songs: [ ...this.state.playlists.songs.slice(0, index), ...this.state.playlists.songs.slice(index + 1), ], }, });}The behavior of our app is weird, when we click on x it also adds it as a favorite.
Let's move our onClick to just the song title
App.js
return ( <tr key={this.props.index}> <td onClick={() => { this.props.handleAdd(this.props.song); this.toggleLove(); }} > {this.props.song.title} </td> <td>{this.props.song.artist}</td> <td>{this.props.song.time}</td> <td onClick={() => this.props.handleDelete(this.props.index)}>X</td> {this.state.love ? <td>♥</td> : <td></td>} </tr>);